<template>
  <view>
    <view class="d-flex d-flex-column d-flex-middle">
      <image class="ist-bg"
             :src="course_detail.document_cover"
             style="height: 560rpx"></image>
    </view>
    <view class="p-2">
      <view class="font-bold font30 mt-1 text-clamp">{{ course_detail.category_name }}</view>
      <view class="font24 mt-3 color999 ch_h d-flex d-flex-middle d-flex-between">
        <text>{{ course_detail.created_at }}</text>
<!--        <text class="iconfont icon-Gc_115_line-Star font40"></text>-->
      </view>
    </view>

    <view class="p-2 bg-fff d-flex d-flex-around main-color px-5">
      <text>课程介绍</text>
      <text>专业目录</text>
    </view>

    <view class="fixedBtn bg-fff pt-2 px-2 pb-5 d-flex d-flex-between font24  d-flex-middle">
      <view class="d-flex d-flex-between d-flex-item d-flex-between">
        <view >
          <image style="width: 44rpx;height: 44rpx"
                 src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/listen.png"></image>
        </view>
      </view>
      <view class="ml-5 py-1 rounded30 colorfff font28 bg-main d-flex-item text-center" @click="openPay">资料下载
      </view>
    </view>

  </view>
</template>

<script>
import {fileApi} from "@/http/fileApi";
import {mapState} from "vuex"
export default {
  data() {
    return {
      rpId:'',
      course_detail:''
    }
  },
  onLoad(option) {
    this.rpId = Number(option.id)
    this.goCategoryId(this.rpId)
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState,
    }),
  },
  methods: {
    async goCategoryId(id) {
      console.log(id,'id222')
      let res = await fileApi.getDocuments(id)
      this.course_detail = res
    },}
}
</script>

<style scoped>
.text-clamp-two {
  line-height: 1.6; /* 调整行高使2行高度固定 */
  height: calc(1.6em * 2); /* 固定2行高度 */
}

.fixedBtn {
  position: fixed;
  bottom: 0;
  width: calc(100% - 40rpx);
}


.color-5C5C5CCC {
  color: #5C5C5CCC;
}
</style>
